@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff2') format('woff2'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
  }

.banner {
    background-image: url(../../images/plan/bg_red.png);
    height: 200px;
}
.w {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.dropdown {
    width: 200  px;
    font-size: 16px;
    position: absolute;
    top: 155px;
    left: 20px;
    z-index: 9999;
    padding: 0 20px;  
    background-color: #FFFFFF;
    box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);
    .dt {
        width: 200px;
        height: 47px;
        line-height: 47px;
        text-align: center;
        background-color: #fff;
        color: #00A4FF;
        
    }
    .dd {
        height: 100%;
        width: 200px;
        // background-color: pink;
        // display: none;
        div {
            padding-top: 10px;
            text-align: center;
            margin-bottom: 20px;
            img {
                margin-top: 10px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                cursor: pointer;
            }
            p {
                margin: 2px;
            }
        }
        ul {
            li {
                text-align: center;
                margin: 20px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.075);
                cursor: pointer;
                span {
                    margin: 0 40px;
                }
                em {
                    font-style: normal;
                }
            }
            .current {
                color: #00A4FF;
            }
        }
        
    }
}
.content {
    padding-left: 290px;
    // display: none;
    .course{
        width: 100%;
        height: 400px;
        background-color: purple;
        // display: none;
    }
    // 我的课程订单
    .order{
        width: 100%;
        display: none;
        // 导航
        .order_nav{
                height: 20px;
                text-align: center;
                margin: 15px 0 20px;
            li{
                float: left;
                a{
                    display: block;
                    color: #666666;
                    font-size: 16px;
                    padding:0 35px;
                    border-right: 1px solid #666666 ;
                }
                a:hover{
                    font-weight: 600;
                    color: #00A4FF;
                }
            }
        }
        table{
            thead{
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                background-color: #fff;       
                td{
                    height: 40px;
                    width: 100px;
                }     
            }
            tbody{
             tr{   
                 background-color: #fff;
                }
                // 订单编号订单时间
                tr:nth-child(odd){
                    height: 20px;
                    width: 500px;
                    color: #666666;
                    font-size: 14px;
                  td{
                    position: relative;
                      border-top:10px solid #f4f5f7 ;
                      border-bottom: 1px solid #f4f5f7;
                      padding:5px 20px;
                      .delete{
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 0px;
                        right: 12px;
                    }
                  }

                }
                // 订单详情
                tr:nth-child(even){
                    text-align: center;
                    font-size: 14px;
                    // 图片
                    .small_pic{
                        width: 180px;
                        height: 100px;
                        margin:20px 5px 20px 20px;
                    }
                    h3{
                        width: 120px;
                        margin: 0 0 10px -10px;
                    }
                    .star{
                        margin:11px 0 15px -5px;
                    }
                    p{
                        margin-left: -10px;
                        color: #DD340D;
                    }
                    span{
                        color: #666666;
                    }
                    i{
                        color: #FF7C2D;
                        font-style: normal;
                        padding-left: 5px;
                    }
                    // 按钮
                    td{
                        a{
                            display: block;
                            height: 30px;
                            width: 90px;
                            line-height: 30px;
                        }
                      // 去支付按钮
                        .pay{
                            margin-bottom: 10px;
                            color: #FFFFFF;
                            background-color: #ff592d;
                        }
                      // 取消订单按钮
                        .cancel{
                            color:#ff592d ;
                            border: 1px solid #ff592d;
                        }
                        // 课程评价按钮
                        .comment{
                            color: #00A4FF;
                            border: 1px solid #00A4FF;
                        }
                        // 破折号
                        em{
                            color:#999999 ;
                        }
                    }

                }
            }
        }    
        // 跳转页面
        .page{
            width: 750px;
            height: 40px;
            margin: 40px auto 20px;
            li{
                float: left;
                a{
                    display: block;
                    padding: 10px 20px;
                    &:hover{
                        background-color: #00A4FF;
                        color: #FFFFFF;
                    }
                }
            }
        }    
    }
    .news{
        width: 100%;
        height: 400px;
        background-color: blanchedalmond;
        display: none;
    }
    .collect{
        width: 100%;
        height: 400px;
        background-color: orange;
        display: none;
    }
    .set{
        width: 100%;
        height: 400px;
        background-color: pink;
        display: none;
    }
}